<template>
  <el-row :gutter="20">
  <el-col :xs="24" :sm="24" :md="12" :lg="12">
    <el-card class="announcement-board">
      <div slot="header" class="clearfix" style="font-size: 18px">
        <span>公告列表</span>
      </div>
      <el-timeline>
        <el-timeline-item v-for="item in items" :key="item.id" :timestamp="item.date" placement="top">
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </el-col>
  </el-row>
</template>

<script>export default {
  data() {
    return {
      items: [
        { id: 1, date: '2024-07-2', title: '公告标题 1', content: '这里是公告内容 1...' },
        { id: 2, date: '2024-07-2', title: '公告标题 2', content: '这里是公告内容 2...' },
        // 更多公告...
      ]
    };
  },
  created() {
    this.getAnnouncementList();
  },
  methods:{
    getAnnouncementList(){
      this.$http.get('/api/announcement/list').then(res => {
        this.items = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    }
  }

};
</script>

<style>

</style>
